<template>
  <div>
      <div class="seckill_wrap">
            <div class="sec_title">
                <div class="time">
                    <p class="jdsk">京东秒杀</p>
                    <p class="store">{{htime}}点场</p>
                    <p class="miao">{{time.hour}}:{{time.min}}:{{time.second}}</p>
                </div>
                <p class="morea">
                    更多
                    <van-icon name="add-o" />
                </p>
            </div>
            <div class="seckill_swipe">
                <van-swipe :loop="false" :width="140" :show-indicators="false">
                    <van-swipe-item v-for="(item,index) in secKillList" :key="index" @change="swipeChange(index)" @click="goInfo(item.goods_id)">
                        <img :src="item.image" alt="">
                        <p class="name">{{item.goods_name}}</p>
                        <p class="price">￥{{item.price}}</p>
                        <p class="oldPrice">￥{{item.old_price}}</p>
                    </van-swipe-item>
                </van-swipe>
            </div>
        </div>
  </div>
</template>

<script>
import {Countdown} from "../../utils/tools"
import {getsecKill} from "../../api/common"
export default {
    name:'seckill',
    methods: {
        swipeChange(i){
            // console.log(i)
        },
        goInfo(gid){
          this.$router.push({
            path:`/info/${gid}`
          })
        },
        // index(i){
        //     this.ind = i
        // }
    },
    created() {
        // 获取秒杀数据
        getsecKill({p:1}).then(res=>{
            // console.log("秒杀数据",res)
            this.secKillList = res.result.data
        })
        // 倒计时方法
        // 初始化小时
        this.htime = new Date().getHours()
        setInterval(()=>{
            this.time = Countdown(this.killtime)
             this.newdate = new Date()
        },1000)
        if(this.newdate === new Date(this.killtime)){
            let newTime = parseInt(this.killtime.substr(this.killtime.indexOf(',')+1,2))+1
            this.killtime = "2020/9/11,"+newTime+":00:00"
            // 到达时间后 重新赋值小时场
            this.htime = new Date().getHours()
        }
        // var str = new Date().split("")
        // console.log(typeof new Date())
        // console.log(new Date().getHours())
    },
    mounted() {
        
    },
    data() {
        return {
            killtime:"2020/9/12,23:00:00",
            time:{},
            newdate:'',
            htime : 0,
            secKillList : [],
            

        }
    },
}
</script>

<style lang="less">
    .seckill_wrap{
        width: 100%;
        height: 380px;
        
        .sec_title{
            width: 100%;
            height: 70px;
            display: flex;
            justify-content: space-between;
            // padding: 0 20px;
            // box-sizing: border-box;
            .time{
                width: 70%;
                display: flex;
                justify-content: space-around;
            }
            .morea{
                // width: 30%;
                flex:1
            }
        }
        .seckill_swipe{
            width: 100%;
            height: 350px;
            // display: flex;
            // justify-content: space-around;
            .van-swipe{
                width: 100%;
                height: 350px;
                .van-swipe__track{
                    width: 150px;
                    .van-swipe-item{
                        width: 150px;
                        text-align: center;
                        img{
                            width: 120px;
                            height: 160px;
                        }
                        .name{
                            height: 110px;
                            overflow: hidden;
                            font-size: smaller;
                        }
                        .price{
                            font-size: large;
                            font-weight: bold;
                            color: #f20;
                        }
                        .oldPrice{
                            color: #ccc;
                            text-decoration: line-through;
                        }
                }
                }
            }
        }
    }
</style>